import React, {Component} from 'react';
import Comment from './Comment'
class CommentList extends Component {
  /* .map() 遍历数组中每一项并操作它,最后返回一个新数组 */
  //注意这里的es6写法的列表形式
  render() {
    /* const comments = [
      {
        username: 'Jerry',
        content: 'Hello'
      }, {
        username: 'Tomy',
        content: 'World'
      }, {
        username: 'Lucy',
        content: 'Good'
      }
    ]; */

    /* return (
      <div>{comments.map((comment, i) => {
          return (
            <div key={i}>
              {comment.username}：{comment.content}
            </div>
          )
        })}</div>
    ) */

    //非组件时的代码
    /* return (
      <div>{comments.map((comment, i) => {
              return (
                <div key={i}>
                  {comment.username}:{comment.content}
                </div>
              )
            })
          }</div>
    ) */

    //组件时的代码
    return (
      <div>
        {this
          .props
          .comments
          .map((comment, i) =>< Comment comment = {
            comment
          }
          key = {
            i
          } />)}
      </div>
    )

  }
}

export default CommentList;